<template>
	<view class="container">
		<view class="box-bg">
			<uni-nav-bar left-icon="left" height="60px" color="white" background-color="#0044cc" rightText="联系客服"
				title="异常上报" @clickLeft="back" />
		</view>
		<uni-section title="异常类型" title-font-size="18px" type="line" padding>
			<button class="buttontext" @click="getButtonText('道路拥堵')">道路拥堵</button>
			<button class="buttontext" @click="getButtonText('煤炭异常')">煤炭异常</button>
			<button class="buttontext" @click="getButtonText('煤炭/站台排队车数过多')">煤炭/站台排队车数过多</button>
			<button class="buttontext" @click="getButtonText('其他')">其他</button>
			<view class="describe">
				<view class="describe_kuang">
					<textarea maxlength="1000" @input="getlenth" placeholder="请输入您要上报的问题,100字以内" :value="buttonValue" />
				</view>
				<view class="describe_text"><text>{{length}}</text>/<label>100</label></view>
			</view>
		</uni-section>
		<view style="position: relative;">
			<uni-section title="上传图片" title-font-size="18px" type="line">
				<view class="example-body">
					<text class="uploadelement">(最多上传3张,格式要求JPG,PNG)</text>
					<uni-file-picker file-mediatype="all" class="aaa">
						<uni-icons type="plus-filled" size="50" color="blue"
							style="line-height: 120px;"></uni-icons><br>
					</uni-file-picker>
				</view>
			</uni-section>
		</view>
		<view style="position: relative;">
			<uni-section title="上传视频" title-font-size="18px" type="line">
				<view class="example-body">
					<text class="uploadelement">(最多上传1个视频)</text>
					<uni-file-picker file-mediatype="video" class="aaa">
						<uni-icons type="plus-filled" size="50" color="blue"
							style="line-height: 120px;"></uni-icons><br>
					</uni-file-picker>
				</view>
			</uni-section>
		</view>
		<button class="submitButton" type="primary">提交</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				length: 0,
				buttonValue: '',
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			getButtonText(e) {
				console.log(e)
				this.buttonValue = e
			},
			getlenth(e) {
				this.length = e.detail.cursor;
			}
		}
	}
</script>

<style>
	.buttontext {
		display: inline-block;
		height: 35px;
		line-height: 35px;
		font-size: 16px;
		color: #7cadcf;
		margin: 0px 20px 10px 5px;
	}

	.describe {
		width: 94%;
		height: auto;
		margin: 25upx auto;
		background: #f7f7f7;
		border-radius: 10px;
		border: 1px solid #dcdcdc;
		box-sizing: border-box;
		padding: 13px 3%;
		color: #adadad;
		box-shadow: 0px 3px 13px rgba(0, 0, 0, 0.02);
	}

	.describe_kuang {
		width: 100%;
		height: 120px;
		margin-bottom: 25upx;
		color: #a1a1a1;
	}

	.describe_kuang textarea {
		width: 100%;
		height: 450upx;
		font-size: 15px;
		line-height: 45upx;
	}

	.describe_text {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		font-size: 15px;
		color: #bebebe;
	}

	.describe_text text {
		color: #bebebe;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.uploadelement {
		position: absolute;
		left: 22%;
		top: 12px;
		color: red;
		font-size: 18px;
	}

	.aaa {
		display: flex;
		width: 160px;
		height: 120px;
		justify-content: center;
		align-items: center;
		background-color: whitesmoke;
		padding: 10px;
		margin: 0 5px;
	}

	.submitButton {
		width: 350px;
		margin-top: 30px;
		border-radius: 50px;
		background-color: blue;
	}
</style>